<template>
  <el-container class="e0-layout">
    <!-- 渐变顶部栏 -->
    <el-header height="60px" class="e0-header">
      <div class="header-content">
        <div class="brand">
          <img src="@\assets\logo.png" class="logo">
          <span class="title">员工系统</span>
        </div>

        <div class="right-area">
          <div class="time-info">
            日期:{{ currentDate }}&nbsp;&nbsp; 时间:{{ currentTime }}
          </div>
          <div class="divider"></div>
          <div class="greeting">
            你好，{{ user.name }}
          </div>
        </div>
      </div>
    </el-header>

    <el-container>
      <!-- 侧边栏 - 添加resize-observer=false -->
      <el-aside width="160px" class="e0-sidebar" :resize-observer="false">
        <el-menu :default-active="$route.path" router class="e0-menu">
          <el-menu-item index="/e0/ordercurrent">
            <el-icon>
              <Document />
            </el-icon>
            <span>订单处理</span>
          </el-menu-item>

          <el-menu-item index="/e0/profile">
            <el-icon>
              <User />
            </el-icon>
            <span>账户</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 内容区 - 添加最小宽度 -->
      <el-main class="e0-main">
        <router-view />
      </el-main>



    </el-container>



  </el-container>
</template>


<script>
// 1. 确保正确导入 watch 
import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Document, User } from '@element-plus/icons-vue'
import { debounce } from 'lodash-es'
import logo from '@/assets/logo.png'
import authStore from "@/model/authstore";
import { useDateTime } from '@/utils/timeUtils/DateTime'
import { ElMessage } from 'element-plus'


export default {
  name: 'E0Layout',
  components: { Document, User },
  setup() {
    const route = useRoute()
    const router = useRouter()
    // 示例：英文格式显示 
    const { currentDate, currentTime } = useDateTime({})

    const user = computed(() => {
      const authData = authStore.get('auth') || {}
      return {
        name: authData.user?.name,
        image: authData.user?.image || logo,
        permission: authData.user?.permission ?? 0,
        status: authData.user?.status ?? 1
      }
    })

    const handleResize = debounce(() => {
      console.log(' 响应式布局调整')
    }, 300)


    
    onMounted(() => {
      if (!authStore.isAuthenticated) {
        router.replace('Cloign ')
        ElMessage.error("请登录，您本次非法行为将记录在案")
        return;
      }


      onBeforeUnmount(() => {
        window.removeEventListener('resize', handleResize)
      })
    })

    // 2. 现在watch已经被正确导入 
    watch(
      () => route.path,
      (newPath) => {
        console.log(' 路由变化:', newPath)

      }
    )

    return {
      user,
      currentDate,
      currentTime
    }
  }
}
</script>




 
<style scoped lang="scss">
.e0-layout {
  --primary-blue: #676767c3;
  --light-blue: #a8c6ffb9;
  --bg-color: #f8fbfe;
  --text-dark: #2c3e50;
  height: 100vh;
  overflow: hidden;
}

.e0-header {

  background: linear-gradient(135deg, #676767c3 0%, #a8c6ffb9 100%);
  color: rgb(51, 51, 51);
  box-shadow: 0 2px 10px rgba(106, 158, 255, 0.2);


  .header-content {
    display: flex;
    height: 100%;
    align-items: center;


    .brand {
      display: flex;
      align-items: center;
      margin-right: 30px;

      .logo {
        width: 28px;
        height: 28px;
        filter: brightness(0) invert(1);
      }

      .title {
        font-weight: 600;
        margin-left: 8px;
      }
    }

    .right-area {
      display: flex;
      align-items: center;
      margin-left: auto;
      color: #444444;

      .time-info {
        font-size: 14px;
      }

      .divider {
        height: 16px;
        width: 1px;
        background-color: rgba(255, 255, 255, 0.5);
        margin: 0 12px;
      }

      .greeting {
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
}

.e0-sidebar {
  background: white;
  box-shadow: 1px 0 1px rgb(163, 163, 163);
  z-index: 1;

  .e0-menu {
    border-right: none;

    :deep(.el-menu-item) {
      height: 46px;
      margin: 0px 0;
      transition: all 0.3s;
      border-bottom: 1px;

      &:hover {
        background: rgba(215, 215, 215, 0.9);
      }

      &.is-active {
        background-color: #afb9c3;
        border-right: 3px solid var(--primary-blue);
        color: #ffffff;
      }
    }
  }
}

.e0-main {
  background: var(--bg-color);
  padding: 20px;
}

@media (max-width: 548px) {
  .e0-header {
    .header-content {


      .title {
        display: none;
      }


      .right-area {
        .greeting {
          font-size: 12px;
          display: none;
        }

        .divider {
          margin: 0 8px;
        }
      }
    }
  }

  .e0-sidebar {
    width: 64px !important;

    :deep(.el-menu-item) {
      span {
        display: none;
      }
    }
  }
}
</style>